<template>
  <div>
    <div class="gva-search-box">
      <el-form
        ref="elSearchFormRef"
        :inline="true"
        :model="searchInfo"
        class="demo-form-inline"
        :rules="searchRule"
        @keyup.enter="onSubmit"
      >
        <el-form-item label="创建日期" prop="createdAt">
          <template #label>
            <span>
              创建日期
              <el-tooltip
                content="搜索范围是开始日期（包含）至结束日期（不包含）"
              >
                <el-icon>
                  <QuestionFilled />
                </el-icon>
              </el-tooltip>
            </span>
          </template>
          <el-date-picker
            v-model="searchInfo.startCreatedAt"
            type="datetime"
            placeholder="开始日期"
            :disabled-date="
              (time) =>
                searchInfo.endCreatedAt
                  ? time.getTime() > searchInfo.endCreatedAt.getTime()
                  : false
            "
          ></el-date-picker>
          —
          <el-date-picker
            v-model="searchInfo.endCreatedAt"
            type="datetime"
            placeholder="结束日期"
            :disabled-date="
              (time) =>
                searchInfo.startCreatedAt
                  ? time.getTime() < searchInfo.startCreatedAt.getTime()
                  : false
            "
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="客户编号" prop="customerNum">
            <el-input v-model="searchInfo.customerNum"  placeholder="请输入客户编号" />
        </el-form-item>
        <el-form-item label="品牌" prop="brandNum">
            <el-input v-model="searchInfo.brandNum"  placeholder="请输入品牌" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="search" @click="onSubmit"
            >查询</el-button
          >
          <el-button icon="refresh" @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="gva-table-box">
      <div class="gva-btn-list">
        <el-button type="primary" icon="plus" @click="openDialog"
          >新增</el-button
        >
        <el-button type="primary" icon="copyDocument"  :disabled="!multipleSelection.length" @click="copyDatas"
          >复制</el-button
        >
        <el-button
          icon="delete"
          style="margin-left: 10px"
          :disabled="!multipleSelection.length"
          @click="onDelete"
          >删除</el-button
        >
      </div>
      <el-table
        ref="multipleTable"
        style="width: 100%"
        tooltip-effect="dark"
        :maxHeight="'calc(100vh - 270px)'"
        :data="tableData"
        row-key="ID"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column align="left" label="编号" prop="testName" show-overflow-tooltip />
        <el-table-column align="left" label="日期" show-overflow-tooltip>
          <template #default="scope">{{
            formatDate(scope.row.CreatedAt)
          }}</template>
        </el-table-column>

        <el-table-column align="left" label="客户" prop="customerNum" show-overflow-tooltip />
        <el-table-column align="left" label="品牌" prop="brandNum" show-overflow-tooltip />
        <el-table-column align="left" label="镜架材质" prop="frameMaterial" show-overflow-tooltip />
        <el-table-column align="left" label="镜架结构" prop="frameCate" show-overflow-tooltip />
        <el-table-column align="left" label="操作" fixed="right" width="240">
          <template #default="scope">
            <el-button
              type="primary"
              link
              class="table-button"
              @click="getDetails(scope.row)"
            >
              <el-icon style="margin-right: 5px">
                <InfoFilled />
              </el-icon>
              详情
            </el-button>
            <el-button
              type="primary"
              link
              icon="edit"
              class="table-button"
              @click="updateTestStandardDocumentFunc(scope.row)"
              >变更</el-button
            >
            <el-button
              type="primary"
              link
              icon="delete"
              @click="deleteRow(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="gva-pagination">
        <el-pagination
          layout="total, sizes, prev, pager, next, jumper"
          :current-page="page"
          :page-size="pageSize"
          :page-sizes="[10, 30, 50, 100]"
          :total="total"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        />
      </div>
    </div>
    <el-drawer
      size="84%"
      v-model="dialogFormVisible"
      :show-close="false"
      :before-close="closeDialog"
    >
      <template #title>
        <div class="flex justify-between items-center">
          <span class="text-lg">{{
            type === "create" ? "添加" : type === "update" ? "修改" : "详情"
          }}</span>
          <div>
            <el-button type="primary" @click="enterDialog" v-if="type != 'look'"
              >确 定</el-button
            >
            <el-button @click="closeDialog">取 消</el-button>
          </div>
        </div>
      </template>
      <div style="position: relative">
        <div
          style="
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            z-index: 10;
          "
          v-if="type == 'look'"
        ></div>
        <el-form
          :model="formData"
          ref="elFormRef"
          :rules="rule"
          label-width="150px"
        >
          <el-form-item label="客户:" prop="customerNum">
            <el-select
              v-model="formData.customerNum"
              placeholder="请选择客户"
              style="width: 100%"
              :clearable="true"
              filterable
              remote
              :remote-method="remoteMethod"
              @change="customerChange"
            >
              <el-option
                v-for="(item, index) in customerInfoList"
                :key="index"
                :label="item.customerNum"
                :value="item.customerNum"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="品牌:" prop="brandNum">
            <el-select
              v-model="formData.brandNum"
              placeholder="请选择品牌"
              style="width: 100%"
              :clearable="true"
              multiple
              filterable
            >
              <el-option
                v-for="(item, index) in brandDataList"
                :key="index"
                :label="item.brandName"
                :value="item.brandName"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="镜架材质:" prop="frameMaterial">
            <el-select
              v-model="formData.frameMaterial"
              placeholder="请选择镜架材质"
              style="width: 100%"
              :clearable="true"
              multiple
            >
              <el-option
                v-for="(item, index) in frameMaterialList"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="镜架结构:" prop="frameCate">
            <el-select
              v-model="formData.frameCate"
              placeholder="请选择镜架结构"
              style="width: 100%"
              :clearable="true"
              multiple
            >
              <el-option
                v-for="(item, index) in glassFrameCateList"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="编号" prop="testName">
            <el-input v-model="formData.testName"></el-input>
          </el-form-item>
          <el-form-item label="测试内容:" prop="testDetails">
            <!-- {{ formData.testDetails }} -->
            <div class="testDetails-box-title">
              <div class="one">测试标准名称</div>
              <div class="two">测试分类</div>
              <div class="three">测试项目</div>
              <div class="four">是否需要测试</div>
              <div class="five">大办需要测试</div>
              <div class="six">需要测试报告</div>
            </div>
            <div
              class="testDetails-box-detail"
              v-for="item in formData.testDetails"
            >
              <div
                class="one"
                :style="{
                  height: oneHeight(item) * 30 + 'px',
                  lineHeight: oneHeight(item) * 30 + 'px',
                }"
              >
                {{ item.name }}
              </div>
              <div class="two">
                <div
                  v-for="it in item.children"
                  :style="{
                    height: twoHeight(it.children) * 30 + 'px',
                    lineHeight: twoHeight(it.children) * 30 + 'px',
                  }"
                >
                  {{ it.name }}
                </div>
              </div>
              <div class="three">
                <template v-if="item.children[0]">
                  <div
                    v-for="it in item.children[0].children"
                    style="height: 30px; line-height: 30px"
                  >
                    {{ it.name }}
                  </div>
                </template>
                <template v-if="item.children[1]">
                  <div
                    v-for="it in item.children[1].children"
                    style="height: 30px; line-height: 30px"
                  >
                    {{ it.name }}
                  </div>
                </template>
                <template v-if="item.children[2]">
                  <div
                    v-for="it in item.children[2].children"
                    style="height: 30px; line-height: 30px"
                  >
                    {{ it.name }}
                  </div>
                </template>
              </div>
              <div class="four">
                <template v-if="'isCheck' in item">
                  <div
                    :style="{
                      height: oneHeight(item) * 30 + 'px',
                      lineHeight: oneHeight(item) * 30 + 'px',
                    }"
                  >
                    <el-checkbox v-model="item.isCheck" />
                  </div>
                </template>
                <template v-else>
                  <template v-if="item.children[0]">
                    <div
                      v-for="it in item.children[0].children"
                      style="height: 30px; line-height: 30px"
                    >
                      <el-checkbox v-model="it.isCheck" />
                    </div>
                  </template>
                  <template v-if="item.children[1]">
                    <div
                      v-for="it in item.children[1].children"
                      style="height: 30px; line-height: 30px"
                    >
                      <el-checkbox v-model="it.isCheck" />
                    </div>
                  </template>
                  <template v-if="item.children[2]">
                    <div
                      v-for="it in item.children[2].children"
                      style="height: 30px; line-height: 30px"
                    >
                      <el-checkbox v-model="it.isCheck" />
                    </div>
                  </template>
                </template>
              </div>
              <div class="five">
                <template v-if="'isdbCheck' in item">
                  <div
                    :style="{
                      height: oneHeight(item) * 30 + 'px',
                      lineHeight: oneHeight(item) * 30 + 'px',
                    }"
                  >
                    <el-checkbox v-model="item.isdbCheck" />
                  </div>
                </template>
                <template v-else>
                  <template v-if="item.children[0]">
                    <div
                      v-for="it in item.children[0].children"
                      style="height: 30px; line-height: 30px"
                    >
                      <el-checkbox v-model="it.children[0].isdbCheck" />
                    </div>
                  </template>
                  <template v-if="item.children[1]">
                    <div
                      v-for="it in item.children[1].children"
                      style="height: 30px; line-height: 30px"
                    >
                      <el-checkbox v-model="it.children[0].isdbCheck" />
                    </div>
                  </template>
                  <template v-if="item.children[2]">
                    <div
                      v-for="it in item.children[2].children"
                      style="height: 30px; line-height: 30px"
                    >
                      <el-checkbox v-model="it.children[0].isdbCheck" />
                    </div>
                  </template>
                </template>
              </div>
              <div class="six">
                <template v-if="'iscsCheck' in item">
                  <div
                    :style="{
                      height: oneHeight(item) * 30 + 'px',
                      lineHeight: oneHeight(item) * 30 + 'px',
                    }"
                  >
                    <el-checkbox v-model="item.iscsCheck" />
                  </div>
                </template>
                <template v-else>
                  <template v-if="item.children[0]">
                    <div
                      v-for="it in item.children[0].children"
                      style="height: 30px; line-height: 30px"
                    >
                      <el-checkbox v-model="it.children[1].iscsCheck" />
                    </div>
                  </template>
                  <template v-if="item.children[1]">
                    <div
                      v-for="it in item.children[1].children"
                      style="height: 30px; line-height: 30px"
                    >
                      <el-checkbox v-model="it.children[1].iscsCheck" />
                    </div>
                  </template>
                  <template v-if="item.children[2]">
                    <div
                      v-for="it in item.children[2].children"
                      style="height: 30px; line-height: 30px"
                    >
                      <el-checkbox v-model="it.children[1].iscsCheck" />
                    </div>
                  </template>
                </template>
              </div>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </el-drawer>
  </div>
</template>

<script setup>
import {
  createTestStandardDocument,
  deleteTestStandardDocument,
  deleteTestStandardDocumentByIds,
  updateTestStandardDocument,
  findTestStandardDocument,
  getTestStandardDocumentList,
  getDetailsOnline,
} from "@/api/confTestStandardDocument";

import { getCustomerInfoList, findCustomerInfo } from "@/api/confCustomerInfo";

// 全量引入格式化工具 请按需保留
import {
  getDictFunc,
  formatDate,
  formatBoolean,
  filterDict,
  ReturnArrImg,
  onDownloadFile,
} from "@/utils/format";
import { getDict } from "@/utils/dictionary";
import { getBrandDataList } from "@/api/confBrandData.js";
import { ElMessage, ElMessageBox } from "element-plus";
import { ref, reactive } from "vue";

defineOptions({
  name: "TestStandardDocument",
});

// 自动化生成的字典（可能为空）以及字段
const formData = ref({
  customerNum: "",
  brandNum: "",
  frameMaterial: "",
  frameCate: "",
  testDetails: {},
});
const allowClick = ref(true);
const frameMaterialList = ref([]);
const glassFrameCateList = ref([]);
const customerInfoList = ref([]);
const brandDataList = ref([]);
let testDetails = [
  {
    name: "ISO12870",
    children: [{}],
  },
];
// 验证规则
const rule = reactive({
  customerNum: [{ required: true, message: "请选择客户", trigger: "blur" }],
  brandNum: [{ required: true, message: "请选择品牌", trigger: "blur" }],
  frameMaterial: [{ required: true, message: "请选择镜架材质", trigger: "blur" }],
  frameCate: [{ required: true, message: "请选择镜架结构", trigger: "blur" }],
});

const searchRule = reactive({
  createdAt: [
    {
      validator: (rule, value, callback) => {
        if (searchInfo.value.startCreatedAt && !searchInfo.value.endCreatedAt) {
          callback(new Error("请填写结束日期"));
        } else if (
          !searchInfo.value.startCreatedAt &&
          searchInfo.value.endCreatedAt
        ) {
          callback(new Error("请填写开始日期"));
        } else if (
          searchInfo.value.startCreatedAt &&
          searchInfo.value.endCreatedAt &&
          (searchInfo.value.startCreatedAt.getTime() ===
            searchInfo.value.endCreatedAt.getTime() ||
            searchInfo.value.startCreatedAt.getTime() >
              searchInfo.value.endCreatedAt.getTime())
        ) {
          callback(new Error("开始日期应当早于结束日期"));
        } else {
          callback();
        }
      },
      trigger: "change",
    },
  ],
});

const elFormRef = ref();
const elSearchFormRef = ref();

// =========== 表格控制部分 ===========
const page = ref(1);
const total = ref(0);
const pageSize = ref(10);
const tableData = ref([]);
const searchInfo = ref({});

// 重置
const onReset = () => {
  searchInfo.value = {};
  getTableData();
};

// 搜索
const onSubmit = () => {
  elSearchFormRef.value?.validate(async (valid) => {
    if (!valid) return;
    page.value = 1;
    pageSize.value = 10;
    getTableData();
  });
};

// 分页
const handleSizeChange = (val) => {
  pageSize.value = val;
  getTableData();
};

// 修改页面容量
const handleCurrentChange = (val) => {
  page.value = val;
  getTableData();
};

// 查询
const getTableData = async () => {
  const table = await getTestStandardDocumentList({
    page: page.value,
    pageSize: pageSize.value,
    ...searchInfo.value,
  });
  if (table.code === 0) {
    tableData.value = table.data.list;
    total.value = table.data.total;
    page.value = table.data.page;
    pageSize.value = table.data.pageSize;
  }
};

getTableData();

// ============== 表格控制部分结束 ===============

// 获取需要的字典 可能为空 按需保留
const setOptions = async () => {};

// 获取需要的字典 可能为空 按需保留
setOptions();

// 多选数据
const multipleSelection = ref([]);
// 多选
const handleSelectionChange = (val) => {
  multipleSelection.value = val;
};

// 删除行
const deleteRow = (row) => {
  ElMessageBox.confirm("确定要删除吗?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    deleteTestStandardDocumentFunc(row);
  });
};

// 多选删除
const onDelete = async () => {
  ElMessageBox.confirm("确定要删除吗?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    const IDs = [];
    if (multipleSelection.value.length === 0) {
      ElMessage({
        type: "warning",
        message: "请选择要删除的数据",
      });
      return;
    }
    multipleSelection.value &&
      multipleSelection.value.map((item) => {
        IDs.push(item.ID);
      });
    const res = await deleteTestStandardDocumentByIds({ IDs });
    if (res.code === 0) {
      ElMessage({
        type: "success",
        message: "删除成功",
      });
      if (tableData.value.length === IDs.length && page.value > 1) {
        page.value--;
      }
      getTableData();
    }
  });
};

// 行为控制标记（弹窗内部需要增还是改）
const type = ref("");

// 更新行
const updateTestStandardDocumentFunc = async (row) => {
  const res = await findTestStandardDocument({ ID: row.ID });
  type.value = "update";
  if (res.code === 0) {
    formData.value = res.data.retestStandardDocument;
    formData.value.brandNum = formData.value.brandNum.split(",") || [];
    if (formData.value.frameMaterial) {
      formData.value.frameMaterial = formData.value.frameMaterial.split(",") || [];
    }
    if (formData.value.frameCate) {
      formData.value.frameCate = formData.value.frameCate.split(",") || [];
    }
    formData.value.testDetails = JSON.parse(formData.value.testDetails);
    // console.log("aa", formData.value.testDetails);
    // 获取品牌列表
    brandDataList.value = [];
    getBrandData(formData.value.customerNum);
    dialogFormVisible.value = true;
  }
};

// 删除行
const deleteTestStandardDocumentFunc = async (row) => {
  const res = await deleteTestStandardDocument({ ID: row.ID });
  if (res.code === 0) {
    ElMessage({
      type: "success",
      message: "删除成功",
    });
    if (tableData.value.length === 1 && page.value > 1) {
      page.value--;
    }
    getTableData();
  }
};

// 复制行
function copyDatas(params) {
  ElMessageBox.confirm("确定要复制吗?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    if (multipleSelection.value.length === 0) {
      ElMessage({
        type: "warning",
        message: "请选择要复制的数据",
      });
      return;
    }
    multipleSelection.value.forEach(async(item,index)=>{
      let datas = {...item}
      delete datas.customerNum
      delete datas.brandNum
      delete datas.ID
      delete datas.frameMaterial
      delete datas.frameCate
      await createTestStandardDocument(datas).then(res=>{
        if(index==multipleSelection.value.length-1) {
          getTableData();
        }
      })
    })
   
      ElMessage({
        type: "success",
        message: "复制成功",
      });

  });
}

// 弹窗控制标记
const dialogFormVisible = ref(false);

// 查看详情控制标记
const detailShow = ref(false);

// 打开详情弹窗
const openDetailShow = () => {
  detailShow.value = true;
};

// 打开详情
const getDetails = async (row) => {
  const res = await findTestStandardDocument({ ID: row.ID });
  type.value = "look";
  if (res.code === 0) {
    formData.value = res.data.retestStandardDocument;
    formData.value.brandNum = formData.value.brandNum.split(",") || [];
    if (formData.value.frameMaterial) {
      formData.value.frameMaterial = formData.value.frameMaterial.split(",") || [];
    }
    if (formData.value.frameCate) {
      formData.value.frameCate = formData.value.frameCate.split(",") || [];
    }
    formData.value.testDetails = JSON.parse(formData.value.testDetails);
    dialogFormVisible.value = true;
  }
};

// 打开弹窗
const openDialog = () => {
  brandDataList.value = [];
  getDetailsOnline().then((res) => {
    if (res.code == 0) {
      let datas = JSON.parse(res.data);
      formData.value.testDetails = datas;

      type.value = "create";
      dialogFormVisible.value = true;
    }
  });
};

// 关闭弹窗
const closeDialog = () => {
  dialogFormVisible.value = false;
  formData.value = {
    customerNum: "",
    brandNum: "",
    frameMaterial: "",
    frameCate: "",
    testDetails: {},
  };
};
// 弹窗确定
const enterDialog = async () => {
  if(!allowClick.value) {
        return
      }else {
       allowClick.value = false
        setTimeout(() => {
         allowClick.value = true
        }, 3000);
      }
  elFormRef.value?.validate(async (valid) => {
    if (!valid) return;
    let res;
    let datas = { ...formData.value };
    datas.brandNum = datas.brandNum.join(",") || "";
    datas.frameMaterial = datas.frameMaterial.join(",") || "";
    datas.frameCate = datas.frameCate.join(",") || "";
    datas.testDetails = JSON.stringify(datas.testDetails);
    switch (type.value) {
      case "create":
        res = await createTestStandardDocument(datas);
        break;
      case "update":
        res = await updateTestStandardDocument(datas);
        break;
      default:
        res = await createTestStandardDocument(datas);
        break;
    }
    if (res.code === 0) {
      ElMessage({
        type: "success",
        message: "创建/更改成功",
      });
      closeDialog();
      getTableData();
    }
  });
};

// lpf新增
function oneHeight(params) {
  let height = 0;
  height += params.children[0].children.length;
  if (params.children[1]) {
    height += params.children[1].children.length;
  }
  if (params.children[2]) {
    height += params.children[2].children.length;
  }
  return height;
}

function twoHeight(params) {
  return params.length;
}

getDict("frameMaterials").then((res) => {
  frameMaterialList.value = res;
});
// 获取镜架结构
getDict("glassFrameCate").then((res) => {
  glassFrameCateList.value = res;
});
// 获取客户
getCustomerInfoList({ page: 1, pageSize: 99 }).then((res) => {
  if (res.code == 0) customerInfoList.value = res.data.list;
});
// 获取品牌
// getBrandDataList({ page: 1, pageSize: 99 }).then((res) => {
//   if (res.code == 0) brandDataList.value = res.data.list;
// });

// 获取品牌列表
const getBrandData = async (keyword) => {
  await findCustomerInfo({ customerNum: keyword }).then((res) => {
    if (res.code === 0) {
      brandDataList.value = res.data.recustomerInfo.brandDatas;
    }
  });
};

// 客户编号改变
const customerChange = () => {
  console.log("formData.value", formData.value);
  let index = customerInfoList.value.findIndex((item) => {
    return item.customerNum == formData.value.customerNum;
  });
  formData.value.brandNum = [];
  // 获取品牌列表
  brandDataList.value = [];
  getBrandData(customerInfoList.value[index].customerNum);
};

const remoteMethod = (query) => {
  getCustomerInfoList({
    page: 1,
    pageSize: 990,
    customerNum: query ? query : undefined,
  }).then((res) => {
    if (res.code == 0) customerInfoList.value = res.data.list;
  });
};

// const remoteMethod2 = (query) => {
//   getBrandDataList({
//     page: 1,
//     pageSize: 990,
//     brandName: query ? query : undefined,
//   }).then((res) => {
//     if (res.code == 0) brandDataList.value = res.data.list
//   });
// }

</script>

<style lang="scss" scoped>
.testDetails-box-title {
  display: flex;
  width: 100%;
  border: 1px solid #ebeef5;

  .one {
    width: 14%;
    border-right: 1px solid #ebeef5;
  }

  .two {
    width: 20%;
    border-right: 1px solid #ebeef5;
  }

  .three {
    flex: 1;
    border-right: 1px solid #ebeef5;
  }

  .four {
    width: 120px;
    border-right: 1px solid #ebeef5;
    text-align: center;
  }

  .five {
    width: 120px;
    border-right: 1px solid #ebeef5;
    text-align: center;
  }

  .six {
    width: 120px;
    text-align: center;
  }
}

.testDetails-box-detail {
  width: 100%;
  border: 1px solid #ebeef5;
  border-top: 0 solid #000;
  display: flex;
  align-items: center;

  .one {
    width: 14%;
    border-right: 1px solid #ebeef5;
  }

  .two {
    width: 20%;
    border-right: 1px solid #ebeef5;

    div {
      border-top: 1px solid #ebeef5;

      &:first-child {
        border-top: 0 solid #000;
      }
    }
  }

  .three {
    flex: 1;
    border-right: 1px solid #ebeef5;

    div {
      border-top: 1px solid #ebeef5;

      &:first-child {
        border-top: 0 solid #000;
      }
    }
  }

  .four {
    width: 120px;
    border-right: 1px solid #ebeef5;
    text-align: center;

    div {
      border-top: 1px solid #ebeef5;

      &:first-child {
        border-top: 0 solid #000;
      }
    }
  }

  .five {
    width: 120px;
    border-right: 1px solid #ebeef5;
    text-align: center;

    div {
      border-top: 1px solid #ebeef5;

      &:first-child {
        border-top: 0 solid #000;
      }
    }
  }

  .six {
    width: 120px;
    text-align: center;

    div {
      border-top: 1px solid #ebeef5;

      &:first-child {
        border-top: 0 solid #000;
      }
    }
  }
}
</style>
